<template>
    <div class="content-box">
        <div class="container">
            <div data-v-cb5e0d2e="" class="strategydetail"><h1 data-v-cb5e0d2e="">基于神经网络的策略</h1></div>
            <el-row :gutter="24" style="padding-top:20px">
                <el-col :span="12">
                    <div class="grid-content"></div>
                    <input
                        type="text"
                        name="text"
                        placeholder="请输入股票代码"
                        v-model="kw"
                        @keydown.enter="
                            get_stockinfo();
                        "
                    />
                    <div>
                        <div class="stock_info">涨跌趋势判断：{{ zhangdiequshi }}</div>
                    </div>

                    <div class="stock_info">涨跌等级：{{ zhangdiedengji }}</div>
                    <div class="stock_info">第一天预测涨跌幅：{{ day1 }}</div>
                    <div class="stock_info">第二天预测涨跌幅：{{ day2 }}</div>
                    <div class="stock_info">第三天预测涨跌幅：{{ day3 }}</div>

                    <div style="padding-top:15px" class="zhushi">注释：六个等级</div>
                    <div class="zhushi">1.涨幅超过4.5%</div>
                    <div class="zhushi">2.涨幅在1.5%-4.5%之间</div>
                    <div class="zhushi">3.涨幅在0-1.5%之间</div>
                    <div class="zhushi">4.跌幅在0-1.5%之间</div>
                    <div class="zhushi">5.跌幅在1.5%-4.5%之间</div>
                    <div class="zhushi">6.跌幅在4.5%-10%</div>

                    <div class="zhangdie">下图展示了第一天涨跌幅的预测值和真实值的差别</div>
                    <div class="zhangdie">其中横轴是例子个数，纵轴展示的是实际涨跌幅和预测涨跌幅的额度.</div>
                    <img style="width:70%" src="../../assets/img/figure1.png" />
                </el-col>
                <el-col :span="12">
                    <div class="grid-content"></div>
                    <div style="font-size:larger;font-weight:bolder">策略介绍</div>
                    <div>
                        <div style="font-size:medium;font-weight:bold">AI1：基于逻辑回归的单支股票涨跌分类预测 </div>
                        <div>输入量：其中一个元素为常数项，常数项以外的元素分别为股票当天的基本信息。</div>
                        <div>输出量：上涨/下跌的两个等级。 </div>
                        <div>训练方法：对参数向量进行随机初始化，在训练集中利用梯度下降算法调整参数向量。</div>
                    </div>
                    <div>
                        <div style="font-size:medium;font-weight:bold">AI2：基于神经网络的单支股票涨跌等级预测 </div>
                        <div>输入量：其中的一个元素为常数项，常数项以外的元素分别为股票当天的基本信息。</div>
                        <div>输出量：共六个等级。六个等级分别为：1、涨幅超过4.5%   2、涨幅在1.5%-4.5%之间  3、涨幅在0-1.5%之间  4.跌幅在0-1.5%之间  5、跌幅在1.5%-4.5%之间  6、跌幅在4.5%-10%之间。 </div>
                        <div>训练方法：设立神经网络的隐藏层，对神经网络的参数矩阵进行随机初始化，在训练集中利用反向传播算法调整参数矩阵。</div>
                    </div>
                    <div>
                        <div style="font-size:medium;font-weight:bold">AI3：基于神经网络的单支股票未来三天精确涨跌幅预测 </div>
                        <div>输入量：其中的一个元素为常数项，常数项以外的元素分别为股票在此前三天的基本信息。</div>
                        <div>输出量：三个介于-0.1~0.1之间的实数，代表了未来三天该支股票的精确涨跌幅。 </div>
                        <div>训练方法：设立神经网络的隐藏层，对神经网络的参数矩阵进行随机初始化，在训练集中利用反向传播算法调整参数矩阵。</div>
                    </div>
                    <div style="font-size:larger;font-weight:bolder">数据集</div>
                    <img style="width:100%" src="../../assets/img/csv2.png" />
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { doesNotThrow } from 'assert';

export default {
    name: 'strategy',
    data() {
        return {
            zhangdiequshi: '上涨',
            zhangdiedengji: '1级',
            day1: '5%',
            day2: '2%',
            day3: '2%',
            kw:'',
        };
    },
    methods: {
        //传输数据到后端
        get_stockinfo: function(event) {
            let config = {
                // 关于comnteng-type，看https://www.jb51.net/article/145209.htm
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            };
            let data = { stock_id: this.kw };
            // axios方式发送请求
            this.$axios
                .post('http://127.0.0.1:8000/api/predict_stock/', data, config)
                .then(response => {
                    console.log(response.data);
                    this.zhangdiequshi=response.data.up_or_down
                    this.zhangdiedengji=response.data.status
                    this.day1=response.data.first_day
                    this.day2=response.data.second_day
                    this.day3=response.data.third_day
                })
                .catch(function(error) {
                    // 请求失败处理
                    console.log(error);
                });
        },
    }
};
</script>

<style scoped>
.navbar-collapse {
    width: auto;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-align: center;
    margin-top: 40px;
}

.navbar-nav {
    margin: 7.5px -15px;
}

.nav {
    padding-left: 0;
    list-style: none;
    margin-top: 15px;
}

.top-nav-wrap {
    font-size: 60px;
    font-family: simsun;
    height: 80px;
    background-color: #f7f7f7;
    border-top: 2px solid #ff4901;
    border-bottom: 1px solid #dfdfdf;
    position: fixed !important;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999;
    width: 100%;
    min-width: 1600px;
}

.ad {
    margin-left: 15px;
    margin-right: 15px;
    font-size: 30px;
}

.strategydetail {
    width: 100%;
    height: auto;
    background: #fff;
    position: relative;
    text-align: center;
}
.stock_info {
    font-size: 20px;
    padding-top: 5px;
    color: darkgray;
    text-align: left;
    padding-left: 80px;
}
.zhushi {
    font-size: 15px;
    padding-top: 5px;
    text-align: left;
    padding-left: 80px;
}
.zhangdie {
    font-size: 15px;
    padding-top: 5px;
    color: dodgerblue;
}
</style>
